import { bool } from 'vue-types'
<template>
  <!-- <div> -->
  <HeaderView></HeaderView>
  <div class="page-Full">
    <a-row>
      <a-col :span="11" :offset="1" class="box">
        <swiper :list="list"></swiper>
      </a-col>
      <a-col :span="11" :offset="1" class="box">
        <div class="SingleProdectTitle">OPPO Reno8 {{configures[configuresid].configure}} {{colors[colorsid].color}} {{setMeals[setMealsid].setMeal}}</div>
        <div class="SingleProdectCoupons">
          <div class="SingleProdectCoupon"> 券 </div>
          <div class="SingleProdectCoupon"> 满2299减30 </div>
          <div class="SingleProdectCoupon"> 24期免息 </div>
          <div class="SingleProdectCoupon"> 购物送积分 </div>
        </div>
        <div class="SingleProdectAdvantages">
          <div class="SingleProdectAdvantageTitle">【OPPO官方商城】</div>
          <div class="SingleProdectAdvantage">①【超级闪充】长寿版 80W 超级闪充</div>
          <div class="SingleProdectAdvantage">②【旗舰芯片】天玑 1300 旗舰芯片</div>
          <div class="SingleProdectAdvantage">③【高清主摄】5000万水光人像三摄</div>
          <div class="SingleProdectAdvantage">④【高帧流畅】90Hz 高感电竞屏</div>
        </div>
        <div class="SingleProdectMoneys">
          <div class="SingleProdectMoney">
            <font size=5>￥</font>
            <font size=6>2459</font>
          </div>
          <div class="SingleProdectMoneyToo">
            <font size=5>券后价￥</font>
            <font size=6>2259</font>
          </div>
        </div>
        <div class="SingleProdectColors">
          <div class="SingleProdectSmallTitle">颜色</div>
          <div v-for="item in colors" :key="item.id">
            <div class="SingleProdectColor" :style="{color: item.activeColor, borderColor: item.borderColor}" @click="handleClick(item.id)">
              {{item.color}}
            </div>
          </div>
        </div>
        <div class="SingleProdectColors">
          <div class="SingleProdectSmallTitle">配置</div>
          <div v-for="item in configures" :key="item.id">
            <div class="SingleProdectColor" :style="{color: item.activeColor, borderColor: item.borderColor}" @click="handleClickSecond(item.id)">
              {{item.configure}}
            </div>
          </div>
        </div>
        <div class="SingleProdectColors">
          <div class="SingleProdectSmallTitle">选择套餐</div>
          <div v-for="item in setMeals" :key="item.id">
            <div class="SingleProdectColor" :style="{color: item.activeColor, borderColor: item.borderColor}" @click="handleClickthird(item.id)">
              {{item.setMeal}}
            </div>
          </div>
        </div>
        <div class="SingleProdectSmallTitle">数量</div>
        <div class="SingleProdectNumbers">
          <div class="SingleProdectLattice" @click="countfirst"><minus-outlined/></div>
          <div class="SingleProdectLattice" style="background-color: #fff">{{number}}</div>
          <div class="SingleProdectLattice" @click="countsecond"><plus-outlined/></div>
          <div class="SingleProdectIntroduce">仅限购5件</div>
        </div>
        <hr class="SingleProdectLine" />
        <div class="SingleProdectSafe">
          <div class="SingleProdectSmallTitleRight">购买表示同意&lt;&lt;报障服务条款&gt;&gt;</div>
          <div class="SingleProdectSmallTitle">保障服务(可选)</div>
          <div class="SingleProdectSmallTitle">屏碎保</div>
          <div v-for="item in screenSavers" :key="item.id">
            <div class="SingleProdectRectangle" :style="{color: item.activeColor, borderColor: item.borderColor}" @click="handleClickfourth(item.id)">
              {{item.screenSaver}}
            </div>
          </div>
          <div class="SingleProdectSmallTitle">延长保</div>
          <div v-for="item in extendedWarrantys" :key="item.id">
            <div class="SingleProdectSmallTitle" v-if="item.id==2">OPPO Care+</div>
            <div class="SingleProdectRectangle" :style="{color: item.activeColor, borderColor: item.borderColor}" @click="handleClickfifth(item.id)">
              {{item.extendedWarranty}}
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <hr class="SingleProdectLineLong" />
    <div class="SingleProdectSuperValue">
      <div>
        <font size="5">超值搭配 </font>
        <font size="3">&nbsp;&nbsp;不买立省￥2259起</font>
      </div>
      <div class="SingleProdectBriefIntroduction">
        <div class="SingleProdectBriefIntroductionImg">
          <img height=206 src="@/assets/upload/哆啦A梦.jpg" alt="">
        </div>
        <br><font size="5" color="#858585">OPPO Reno8</font>
        <br><font size="5">￥2259</font>
      </div>
      <div style="margin-top: 150px; width: 24px;float: left;"><plus-outlined/></div>
      <div v-for="item in collocations" :key="item.id">
        <div class="SingleProdectBriefIntroductionElse" :style="{borderColor: item.borderColor}" @click="handleClicksixth(item.id)">
          <div class="SingleProdectBriefIntroductionImg">
            <img width="120" :src="item.pic" alt="">
          </div>
          <br><font size="5" color="#858585">{{item.name}}</font>
          <br><font size="5">￥{{item.price}}</font>
        </div>
      </div>
    </div>
    <hr class="SingleProdectLineLong" style="margin-top: 360px;" />
    <div class="SingleProdectAddToCart">
      <div class="SingleProdectShoppingCartButton"  style="background-color: red;">
        <div style="margin: -15px;" @click="shoppingchild">
          <font size="3" color="#fff">券后价￥2259</font>
        </div>
        <div style="margin-top: -56px;">
          <font size="4" color="#fff">领券购买</font>
        </div>
      </div>
      <div class="SingleProdectShoppingCartButton" style="background-color: #fff;border:1px solid #858585;">
        <div style="margin-top: -6px;">
          <font size="4" color="#000">加入购物车</font>
        </div>
      </div>
      <div>
        <font size="4">已选: {{colors[colorsid].color}} | {{configures[configuresid].configure}} | {{setMeals[setMealsid].setMeal}} {{number}}件</font>
      </div>
      <div style="margin-top: 50px;">
        <div style="margin-right: 30px; float: left; color: #858585;"><font size="3"><CheckCircleOutlined />7天价保</font></div>
        <div style="margin-right: 30px; float: left; color: #858585;"><font size="3"><CheckCircleOutlined />官方正品</font></div>
        <div style="margin-right: 30px; float: left; color: #858585;"><font size="3"><CheckCircleOutlined />顺丰包邮</font></div>
        <div style="margin-right: 30px; float: left; color: #858585;"><font size="3"><CheckCircleOutlined />全国联保</font></div>
        <div style="margin-right: 30px; float: left; color: #858585;"><font size="3"><CheckCircleOutlined />官方发货&售后</font></div>
        <div style="margin-right: 30px; float: left; color: #858585;"><font size="3"><CheckCircleOutlined />7天无理由退换货</font></div>
      </div>
    </div>
    <hr class="SingleProdectLineLong" style="margin-top: 160px;" />
    <div class="SingleProdectLabels">
      <div class="SingleProdectLabelBox">
        <div class="SingleProdectLabel"><a href="#ProductDetails" style="color: #000;">商品详情</a></div>
        <div class="SingleProdectLabel"><a href="#CommodityParameters" style="color: #000;">商品参数</a></div>
        <div class="SingleProdectLabel"><a href="#UserEvaluation" style="color: #000;">用户评价(2649)</a></div>
        <div class="SingleProdectLabel"><a href="#Commend" style="color: #000;">热门推荐</a></div>
      </div>
    </div>
    <hr class="SingleProdectLineLong" style="margin-top: 60px;" />
    <div class="SingleProdectProductDetails" id="ProductDetails">
      <div v-for="item in imgs1" :key="item.id">
        <img width="1440" :src="item.pic" alt="">
      </div>
    </div>
    <div class="SingleProdectProductDetails" id="CommodityParameters">
      <div v-for="item in imgs2" :key="item.id">
        <img width="1440" :src="item.pic" alt="">
      </div>
    </div>
    <hr class="SingleProdectLineLong" style="margin-top: 60px;" />
    <div class="SingleProdectAllEvaluate" id="UserEvaluation">
      <a-row>
        <a-col :span="5" :offset="0">
          <div style="float:left;margin-left: 10px;margin-right: 10px;">
            <font size="6" color="#F63434">96.6%</font>
          </div>
          <div style="">
            <font size="3">用户感到满意</font>
          </div>
        </a-col>
        <a-col :span="18" :offset="1">
          <div class="SingleProdectSamllBox">外观漂亮617</div>
          <div class="SingleProdectSamllBox">官方正品77</div>
          <div class="SingleProdectSamllBox">高性价比360</div>
          <div class="SingleProdectSamllBox">像素高228</div>
          <div class="SingleProdectSamllBox">充电快222</div>
          <div class="SingleProdectSamllBox">电池容量大214</div>
        </a-col>
      </a-row>
    </div>
    <hr class="SingleProdectLineLong" style="margin-top: 10px;" />
    <div class="SingleProdectAllEvaluate" style="height:50px">
      <div class="SingleProdectSamllBox" style="background-color: #fff;margin-top: 0;">全部2652</div>
      <div class="SingleProdectSamllBox" style="background-color: #fff;margin-top: 0;">图片/视频1098</div>
      <div class="SingleProdectSamllBox" style="background-color: #fff;margin-top: 0;">追评141</div>
      <div class="SingleProdectSamllBox" style="background-color: #fff;margin-top: 0;">好评2561</div>
      <div class="SingleProdectSamllBox" style="background-color: #fff;margin-top: 0;">中/差评91</div>
      <div class="SingleProdectSamllBox" style="background-color: #fff;margin-top: 0;float: right;">默认排序<CaretDownOutlined /></div>
      <div class="SingleProdectSamllBox" style="background-color: #fff;margin-top: 0;float: right;">只看当前商品</div>
    </div>
    <hr class="SingleProdectLineLong" style="margin-top: 10px;" />
    <div class="SingleProdectComment">
      <a-row>
        <a-col :span="1" :offset="0">
          <div id="SingleProdectd1">
            <img src="@/assets/upload/美女头像1.jpg" alt="">
          </div>
        </a-col>
        <a-col :span="22" :offset="1">
          <div class="SingleProdectPersonalInformation">
            <div class="SingleProdectPersonalInformationLeft">四叶</div>
            <div class="SingleProdectPersonalInformationLeft" style="color: #d9d919;">金卡</div>
            <div class="SingleProdectPersonalInformationRight">
              <a-rate :value="5" disabled></a-rate>
            </div>
          </div>
          <div class="SingleProdectPersonalInformation">
            <div class="SingleProdectPersonalInformationLeft">1天前</div>
            <div class="SingleProdectPersonalInformationLeft">|</div>
            <div class="SingleProdectPersonalInformationLeft">鸢尾紫,8G+256G,官方标配</div>
          </div>
          <div class="SingleProdectPersonalInformationComment">
            <a-comment>
              <template #actions>
                <span key="comment-basic-like">
                  <a-tooltip title="Like">
                    <template v-if="action === 'liked'">
                      <LikeFilled @click="like" />
                    </template>
                    <template v-else>
                      <LikeOutlined @click="like" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">
                    {{ likes }}
                  </span>
                </span>
                <span key="comment-basic-dislike">
                  <a-tooltip title="Dislike">
                    <template v-if="action === 'disliked'">
                      <DislikeFilled @click="dislike" />
                    </template>
                    <template v-else>
                      <DislikeOutlined @click="dislike" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">
                    {{ dislikes }}
                  </span>
                </span>
                <span key="comment-basic-reply-to">Reply to</span>
              </template>
              <template #content>
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;画面非常唯美。现在画质精美了，但是给人的感觉变了。个人看来，现在重温看老版的很多人，并不是带着“欣赏艺术品”的精力去看的，所谓“欣赏艺术品”的感觉，或许更可能是因为旧剧场版能带来过去坐在电视机前默默看动画的共鸣，换句话说，是情怀拌饭的味道。
                </p>
              </template>
              <a-comment>
                <template #actions>
                  <span>Reply to</span>
                </template>
                <template #author>
                  <a>OPPO(官方)</a>
                </template>
                <template #avatar>
                  <div id="SingleProdectd1" style="width: 50px;height:50px">
                    <img src="@/assets/upload/哆啦A梦官方1.jpg" alt="">
                  </div>
                </template>
                <template #content>
                  <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您的赞美是夜空中最美的流星，陪我穿过黑暗孤单里前行，为了遇见有您的风景～好心情才会有好风景，好眼光才会有好发现，感谢您发现并选择了我们我们会发挥出最大作用，给您带来更好的体验
                  </p>
                </template>
              </a-comment>
            </a-comment>
          </div>
        </a-col>
      </a-row>
      <hr class="SingleProdectLineLong" style="margin-top: 40px;" />
    </div>
    <div class="SingleProdectComment">
      <a-row>
        <a-col :span="1" :offset="0">
          <div id="SingleProdectd1">
            <img src="@/assets/upload/美女头像2.jpg" alt="">
          </div>
        </a-col>
        <a-col :span="22" :offset="1">
          <div class="SingleProdectPersonalInformation">
            <div class="SingleProdectPersonalInformationLeft">三玖</div>
            <div class="SingleProdectPersonalInformationLeft" style="color: #cd7f32;">vip资深用户至尊贵宾卡</div>
            <div class="SingleProdectPersonalInformationRight">
              <a-rate :value="5" disabled></a-rate>
            </div>
          </div>
          <div class="SingleProdectPersonalInformation">
            <div class="SingleProdectPersonalInformationLeft">2天前</div>
            <div class="SingleProdectPersonalInformationLeft">|</div>
            <div class="SingleProdectPersonalInformationLeft">微醺,12G+256G,官方标配</div>
          </div>
          <div class="SingleProdectPersonalInformationComment">
            <a-comment>
              <template #actions>
                <span key="comment-basic-like">
                  <a-tooltip title="Like2">
                    <template v-if="action === 'liked2'">
                      <LikeFilled @click="like2" />
                    </template>
                    <template v-else>
                      <LikeOutlined @click="like2" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">
                    {{ likes2 }}
                  </span>
                </span>
                <span key="comment-basic-dislike">
                  <a-tooltip title="Dislike2">
                    <template v-if="action === 'disliked2'">
                      <DislikeFilled @click="dislike2" />
                    </template>
                    <template v-else>
                      <DislikeOutlined @click="dislike2" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">
                    {{ dislikes2 }}
                  </span>
                </span>
                <span key="comment-basic-reply-to">Reply to</span>
              </template>
              <template #content>
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;非常喜欢"日本的诞生这篇"观感是优秀的，节奏非常舒适，从大雄等人为离家出走的事情犯愁,到正式起航的过渡合适，还抛出了社会、人类、土地等问题。遇到本作主角克克鲁后抛出的谜团也能吸引到观众。至光明族第一次被解放,众人开始念家回到现代为第一个剧情高峰结束。结局处时空巡警救场的桥段虽然精彩且出人意料，但是缺少一些紧张感与僵持感,没有决战的氛围,仓促结束。但是这一缺点在重制版中得以弥补，相较而言我更喜欢重制版，但是这部原版在“旧时代”(1980-1999)的剧场版中也算得上是我非常喜欢的一部了。
                </p>
              </template>
              <a-comment>
                <template #actions>
                  <span>Reply to</span>
                </template>
                <template #author>
                  <a>OPPO(官方)</a>
                </template>
                <template #avatar>
                  <div id="SingleProdectd1" style="width: 50px;height:50px">
                    <img src="@/assets/upload/哆啦A梦官方1.jpg" alt="">
                  </div>
                </template>
                <template #content>
                  <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;风儿吹过，纷扬我的思念，小雨洒落，浸润我的牵挂。愿咱们店铺的产品和服务，让您的生活如风景般美好，让您体验到满意的幸福，期待您的再次光临[]~(￣▽￣)~*
                  </p>
                </template>
              </a-comment>
            </a-comment>
          </div>
        </a-col>
      </a-row>
      <hr class="SingleProdectLineLong" style="margin-top: 40px;" />
    </div>
    <div class="SingleProdectrecommend" id="Commend">
      <div class="SingleProdectLabels">
        <div class="SingleProdectLabelBox">
          为你推荐
        </div>
        <div v-for="item in recommends" :key="item.id">
          <div class="SingleProdectBriefIntroductionElse">
            <div class="SingleProdectBriefIntroductionImg">
              <img width="120" :src="item.pic" alt="">
            </div>
            <br><font size="5" color="#858585">{{item.name}}</font>
            <br><font size="5">￥{{item.price}}</font>
          </div>
        </div>
      </div>
    </div>
    <hr class="SingleProdectLineLong" style="margin-top: 1060px;" />
  </div>
  <SidebarView></SidebarView>
  <FooterView></FooterView>
</template>
<script>
import HeaderView from '@/components/HeaderView.vue'
import FooterView from '@/components/FooterView.vue'
import SidebarView from '@/components/SidebarView.vue'
import Swiper from '../components/Swiper.vue'
import { listData } from '@/datas/swiperdata'
import { PlusOutlined, MinusOutlined, CheckCircleOutlined, CaretDownOutlined, LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import moment from 'moment'
export default {
  data() {
    return {
      colorsid: 0,
      colors: [
        { id: 0, color: '微醺', activeColor: '#F63434', borderColor: '#F63434' },
        { id: 1, color: '晴空蓝', activeColor: '#666', borderColor: '#666' },
        { id: 2, color: '夜游黑', activeColor: '#666', borderColor: '#666' },
        { id: 3, color: '鸢尾紫', activeColor: '#666', borderColor: '#666' }
      ],
      configuresid: 0,
      configures: [
        { id: 0, configure: '8G + 128G', activeColor: '#F63434', borderColor: '#F63434' },
        { id: 1, configure: '8G + 256G', activeColor: '#666', borderColor: '#666' },
        { id: 2, configure: '12G + 256G', activeColor: '#666', borderColor: '#666' }
      ],
      setMealsid: 0,
      setMeals: [
        { id: 0, setMeal: '官方套餐', activeColor: '#F63434', borderColor: '#F63434' }
      ],
      screenSaverid: -1,
      screenSavers: [
        { id: 0, screenSaver: 'OPPO屏碎保一年', activeColor: '#666', borderColor: '#666' },
        { id: 1, screenSaver: '(限时特惠)屏碎保买1年送1年￥143', activeColor: '#666', borderColor: '#666' }
      ],
      extendedWarrantyid: -1,
      extendedWarrantys: [
        { id: 0, extendedWarranty: 'OPPO延长保一年￥79', activeColor: '#666', borderColor: '#666' },
        { id: 1, extendedWarranty: 'OPPO延长保半年￥59', activeColor: '#666', borderColor: '#666' },
        { id: 2, extendedWarranty: 'OPPO Care+ (意外保+延长保+电池换新)￥319', activeColor: '#666', borderColor: '#666' }
      ],
      collocations: [
        { id: 0, pic: require('@/assets/upload/哆啦A梦1.jpg'), name: '80W 车充', price: '999', borderColor: '#666' },
        { id: 1, pic: require('@/assets/upload/哆啦A梦2.jpg'), name: 'Air2', price: '999', borderColor: '#666' },
        { id: 2, pic: require('@/assets/upload/哆啦A梦3.jpg'), name: 'X2 有线充版', price: '999', borderColor: '#666' },
        { id: 3, pic: require('@/assets/upload/哆啦A梦4.jpg'), name: '散热背夹', price: '999', borderColor: '#666' }
      ],
      recommends: [
        { id: 0, pic: require('@/assets/upload/哆啦A梦大雄与梦幻三剑士.jpg'), name: '梦幻三剑士', price: '1' },
        { id: 1, pic: require('@/assets/upload/哆啦A梦大雄的创世日记.jpg'), name: '创世日记', price: '1' },
        { id: 2, pic: require('@/assets/upload/哆啦A梦大雄的奇幻大冒险.jpg'), name: '奇幻大冒险', price: '1' },
        { id: 3, pic: require('@/assets/upload/哆啦A梦大雄与白金迷宫.jpg'), name: '白金迷宫', price: '1' },
        { id: 4, pic: require('@/assets/upload/哆啦A梦大雄的猫狗时空传.jpg'), name: '猫狗时空传', price: '1' },
        { id: 5, pic: require('@/assets/upload/哆啦A梦大雄的天方夜谭.jpg'), name: '天方夜谭', price: '1' },
        { id: 6, pic: require('@/assets/upload/哆啦A梦大雄与动物行星.jpg'), name: '动物行星', price: '1' },
        { id: 7, pic: require('@/assets/upload/哆啦A梦大雄的太阳王传说.jpg'), name: '太阳王传说', price: '1' },
        { id: 8, pic: require('@/assets/upload/哆啦A梦大雄与云之王国.jpg'), name: '云之王国', price: '1' },
        { id: 9, pic: require('@/assets/upload/哆啦A梦大雄与风之使者.jpg'), name: '风之使者', price: '1' },
        { id: 10, pic: require('@/assets/upload/哆啦A梦大雄与银河超特急.jpg'), name: '银河超特急', price: '1' },
        { id: 11, pic: require('@/assets/upload/哆啦A梦大雄的南海大冒险.jpg'), name: '南海大冒险', price: '1' }
      ],
      imgs1: [
        { id: 0, pic: require('@/assets/upload/哆啦A梦大雄与机器人王国.jpg') },
        { id: 1, pic: require('@/assets/upload/哆啦A梦大雄的创世日记.jpg') },
        { id: 2, pic: require('@/assets/upload/哆啦A梦大雄的奇幻大冒险.jpg') },
        { id: 3, pic: require('@/assets/upload/哆啦A梦大雄与白金迷宫.jpg') },
        { id: 4, pic: require('@/assets/upload/哆啦A梦大雄的恐龙2006.jpg') },
        { id: 5, pic: require('@/assets/upload/哆啦A梦大雄的天方夜谭.jpg') },
        { id: 6, pic: require('@/assets/upload/哆啦A梦大雄的人鱼大海战.jpg') },
        { id: 7, pic: require('@/assets/upload/哆啦A梦新大雄的大魔境扁扁与5人之探险队.jpg') },
        { id: 8, pic: require('@/assets/upload/哆啦A梦大雄与绿巨人传.jpg') },
        { id: 9, pic: require('@/assets/upload/哆啦A梦大雄与风之使者.jpg') },
        { id: 10, pic: require('@/assets/upload/哆啦A梦大雄与银河超特急.jpg') },
        { id: 11, pic: require('@/assets/upload/哆啦A梦大雄的宇宙英雄记.jpg') },
        { id: 12, pic: require('@/assets/upload/哆啦A梦大雄与梦幻三剑士.jpg') },
        { id: 13, pic: require('@/assets/upload/哆啦A梦大雄与翼之勇者.jpg') },
        { id: 14, pic: require('@/assets/upload/哆啦A梦新大雄的日本诞生.jpg') }
      ],
      imgs2: [
        { id: 15, pic: require('@/assets/upload/哆啦A梦大雄的宇宙漂流记.jpg') },
        { id: 16, pic: require('@/assets/upload/哆啦A梦大雄与奇迹之岛动物历险记.jpg') },
        { id: 17, pic: require('@/assets/upload/哆啦A梦新大雄与铁人兵团振翅吧天使们.jpg') },
        { id: 18, pic: require('@/assets/upload/哆啦A梦大雄与动物行星.jpg') },
        { id: 19, pic: require('@/assets/upload/哆啦A梦大雄的太阳王传说.jpg') },
        { id: 20, pic: require('@/assets/upload/哆啦A梦大雄与云之王国.jpg') },
        { id: 21, pic: require('@/assets/upload/哆啦A梦大雄的金银岛.jpg') },
        { id: 22, pic: require('@/assets/upload/哆啦A梦大雄的秘密道具博物馆.jpg') },
        { id: 23, pic: require('@/assets/upload/哆啦A梦大雄的南海大冒险.jpg') },
        { id: 24, pic: require('@/assets/upload/哆啦A梦大雄的猫狗时空传.jpg') },
        { id: 25, pic: require('@/assets/upload/哆啦A梦新大雄的日本诞生.jpg') },
        { id: 26, pic: require('@/assets/upload/哆啦A梦大雄的月球探险记.jpg') },
        { id: 27, pic: require('@/assets/upload/哆啦A梦大雄的南极冰冰凉大冒险.jpg') },
        { id: 28, pic: require('@/assets/upload/哆啦A梦大雄的发条都市冒险记.jpg') },
        { id: 29, pic: require('@/assets/upload/哆啦A梦大雄的宇宙开拓史.jpg') }
      ],
      value: [],
      number: 1
    }
  },
  methods: {
    shoppingchild () {
      this.$router.push('/shoppingcart/childone')
    },
    countfirst: function() {
      this.number--
      this.number = Math.max(this.number, 1)
    },
    countsecond: function() {
      this.number++
      this.number = Math.min(this.number, 5)
    },
    handleClick: function (id) {
      this.colorsid = id
      let flag = false
      if (this.colors[id].activeColor === '#F63434') {
        flag = true
      }
      this.colors.forEach(element => {
        element.activeColor = '#666'
        element.borderColor = '#666'
      })
      if (flag) {
        return
      }
      this.colors[id].activeColor = '#F63434'
      this.colors[id].borderColor = '#F63434'
    },
    handleClickSecond: function (id) {
      this.configuresid = id
      let flag = false
      if (this.configures[id].activeColor === '#F63434') {
        flag = true
      }
      this.configures.forEach(element => {
        element.activeColor = '#666'
        element.borderColor = '#666'
      })
      if (flag) {
        return
      }
      this.configures[id].activeColor = '#F63434'
      this.configures[id].borderColor = '#F63434'
    },
    handleClickthird: function (id) {
      this.setMealsid = id
      let flag = false
      if (this.setMeals[id].activeColor === '#F63434') {
        flag = true
      }
      this.setMeals.forEach(element => {
        element.activeColor = '#666'
        element.borderColor = '#666'
      })
      if (flag) {
        return
      }
      this.setMeals[id].activeColor = '#F63434'
      this.setMeals[id].borderColor = '#F63434'
    },
    handleClickfourth: function (id) {
      this.screensaversid = id
      let flag = false
      if (this.screenSavers[id].activeColor === '#F63434') {
        this.screensaversid = id
        flag = true
      }
      this.screenSavers.forEach(element => {
        element.activeColor = '#666'
        element.borderColor = '#666'
      })
      if (flag) {
        return
      }
      this.screenSavers[id].activeColor = '#F63434'
      this.screenSavers[id].borderColor = '#F63434'
    },
    handleClickfifth: function (id) {
      this.extendedWarrantyid = id
      let flag = false
      if (this.extendedWarrantys[id].activeColor === '#F63434') {
        this.extendedWarrantyid = id
        flag = true
      }
      this.extendedWarrantys.forEach(element => {
        element.activeColor = '#666'
        element.borderColor = '#666'
      })
      if (flag) {
        return
      }
      this.extendedWarrantys[id].activeColor = '#F63434'
      this.extendedWarrantys[id].borderColor = '#F63434'
    },
    handleClicksixth: function (id) {
      if (this.collocations[id].borderColor === '#F63434') {
        this.collocations[id].borderColor = '#666'
      } else {
        this.collocations[id].borderColor = '#F63434'
      }
    }
  },
  components: {
    HeaderView,
    FooterView,
    SidebarView,
    Swiper,
    PlusOutlined,
    MinusOutlined,
    CheckCircleOutlined,
    CaretDownOutlined,
    LikeFilled,
    LikeOutlined,
    DislikeFilled,
    DislikeOutlined
  },
  setup() {
    const likes = ref(2340)
    const likes2 = ref(2199)
    const dislikes = ref(21)
    const dislikes2 = ref(34)
    const action = ref()
    const value1 = ref(5)

    const like = () => {
      likes.value = 2341
      dislikes.value = 21
      action.value = 'liked'
    }

    const like2 = () => {
      likes2.value = 2200
      dislikes2.value = 34
      action.value = 'liked2'
    }

    const dislike = () => {
      likes.value = 2340
      dislikes.value = 22
      action.value = 'disliked'
    }

    const dislike2 = () => {
      likes2.value = 2199
      dislikes2.value = 35
      action.value = 'disliked2'
    }

    return {
      list: listData,
      value1,
      likes,
      dislikes,
      likes2,
      dislikes2,
      action,
      like,
      dislike,
      like2,
      dislike2,
      moment
    }
  }
}
</script>
<style scoped>
.SingleProdectrecommend{
  width: 100%;
  height: auto;
  background-color: #F0F0F0;
}
.ant-comment-avatar img{
  width: 100%;
  height: 100%;
}
.SingleProdectPersonalInformationComment{
  width: 100%;
  height: auto;
  text-align: left;
}
.SingleProdectPersonalInformationRight{
  height: 40px;
  text-align: left;
  float: right;
  margin-right: 5px;
  line-height: 40px;
}
.SingleProdectPersonalInformationLeft{
  height: 40px;
  text-align: left;
  float: left;
  margin-right: 5px;
  line-height: 40px;
}
.SingleProdectPersonalInformation{
  width: 100%;
  height: 40px;
  margin-bottom: 1px;
}
img {
  max-width: 100%;
}
#SingleProdectd1{
  width: 80px;
  height: 80px;
  border: 1px solid blue;
  border-radius: 100%;
  overflow: hidden;
}
.SingleProdectComment{
  width: 100%;
  height: auto;
  margin-top: 50px;
  text-align: center;
}
.SingleProdectSamllBox{
  width: auto;
  height: 50px;
  background-color: rgb(242, 244, 244);
  float: left;
  line-height: 50px;
  margin-top: 40px;
  margin-right: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.SingleProdectAllEvaluate{
  width: 100%;
  height: 130px;
  line-height: 130px;
  text-align: left;
}
.SingleProdectProductDetails{
  width: 100%;
  height: auto;
}
.SingleProdectLabel{
  height: 50px;
  width: 120px;
  /* background-color: pink; */
  line-height: 50px;
  float: left;
}
.SingleProdectLabelBox{
  height: 50px;
  width: 480px;
  /* background-color: #3499ec; */
  line-height: 50px;
  text-align: center;
  margin: 0 auto;
}
.SingleProdectLabels{
  height: auto;
  width: 100%;
  /* background-color: aqua; */
  text-align: center;
  float: left;
}
.SingleProdectShoppingCartButton{
  width: 246px;
  height: 70px;
  background-color: #F79A47;
  line-height: 80px;
  text-align: center;
  border-radius: 40px;
  float: right;
  margin-top: -10px;
  margin-left: 20px;
}
.SingleProdectAddToCart{
  width: 100%;
  height: auto;
  /* background-color: antiquewhite; */
  text-align: left;
  margin-top: 60px;
}
.SingleProdectBriefIntroductionElse{
  width: 18%;
  height: 295px;
  background-color: #fff;
  margin-top: 15px;
  text-align: center;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-right: 10px;
  margin-left: 10px;
  border:1px solid #858585;
}
.SingleProdectBriefIntroductionImg{
  height: 70%;
  /* background-color: #F63434; */
  text-align: center;
}
.SingleProdectBriefIntroduction{
  width: 19%;
  height: 295px;
  background-color: #fff;
  margin-top: 15px;
  text-align: center;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.SingleProdectSuperValue{
  width: 100%;
  height: auto;
  /* background-color: antiquewhite; */
  text-align: left;
  margin-top: 30px;
}
.SingleProdectLineLong{
  height:1px;
  border:none;
  border-top:1px solid #858585;
  margin-top: 50px;
}
.SingleProdectRectangle{
  height: 50px;
  width: 100%;
  float: left;
  line-height: 50px;
  text-align: center;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 10px;
  border-style: solid;
  /* border-color: #666; */
  background-color: #fff;
}
.SingleProdectLine{
  height:1px;
  border:none;
  border-top:1px solid #F0F0F0;
  margin-top: 580px;
}
.SingleProdectIntroduce{
  width: auto;
  height: 34px;
  border-radius: 5px;
  text-align: center;
  line-height: 34px;
  margin-top: 20px;
  margin-left: 5px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  color: #F63434;
}
.SingleProdectLattice{
  width: 34px;
  height: 34px;
  background-color: #F0F0F0;
  border-radius: 5px;
  text-align: center;
  line-height: 34px;
  margin-top: 20px;
  float: left;
}
.SingleProdectNumbers{
  height: auto;
  width: 100%;
  float: left;
  text-align: left;
}
.SingleProdectSmallTitleRight{
  height: 30px;
  width: 240px;
  /* background-color: greenyellow; */
  line-height: 30px;
  text-align: right;
  float: right;
  margin-top: 22px;
}
.SingleProdectSmallTitle{
  height: 30px;
  width: 51%;
  /* background-color: greenyellow; */
  line-height: 30px;
  margin-top: 20px;
  text-align: left;
  float: left;
}
.SingleProdectColors{
  height: auto;
  width: 620px;
  /* background-color: #F63434; */
  text-align: left;
  float: left;
}
.SingleProdectColor{
  height: 50px;
  width: 300px;
  /* background-color: #F79A47; */
  float: left;
  line-height: 50px;
  text-align: center;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  border-style: solid;
  /* border-color: #666; */
  background-color: #fff;
}
.SingleProdectMoneyToo{
  height: auto;
  width: auto;
  background-color: #F63434;
  color: #fff;
  text-align: left;
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 30px;
}
.SingleProdectMoney{
  height: auto;
  width: auto;
  color: #F63434;
  background-color: #fff;
  text-align: left;
  float: left;
  margin-right: 20px;
}
.SingleProdectMoneys{
  height: 50px;
  width: auto;
  color: #F63434;
  text-align: left;
  margin-top: 30px;
  /* background-color: #3ba0e9; */
}
.SingleProdectAdvantages{
  height: auto;
  width: auto;
  text-align:left;
}
.SingleProdectAdvantageTitle{
  height: 24px;
  width: auto;
  text-align:left;
  color:#F79A47;
  margin-top: 30px;
}
.SingleProdectAdvantage{
  height: 24px;
  width: auto;
  text-align:left;
  color: #666666;
  margin-top: 5px;
}
.SingleProdectTitle{
  font-size: 31px;
  text-align:left
}
.SingleProdectCoupons{
  width: 100%;
  height: 24px;
  background-color: rgb(255, 255, 255);
  margin-top: 20px;
}
.SingleProdectCoupon{
  height: 100%;
  width: auto;
  background-color: #FFF3F3;
  margin-right: 10px;
  color: #F63434;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  float:left
}
.box{
  width: 200px;
  height: auto;
  background-color: #ffffff;
  margin-top: 40px;
}
.page-Full{
  margin-left: 50px;
  width: 1420px;
  height: auto;
  background-color: rgb(255, 255, 255);
}
#components-layout-demo-basic .code-box-demo {
  text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  color: #fff;
  background: #7dbcea;
}
[data-theme='dark'] #components-layout-demo-basic .ant-layout-header {
  background: #6aa0c7;
}
[data-theme='dark'] #components-layout-demo-basic .ant-layout-footer {
  background: #6aa0c7;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  color: #fff;
  line-height: 120px;
  background: #3ba0e9;
}
[data-theme='dark'] #components-layout-demo-basic .ant-layout-sider {
  background: #3499ec;
}
#components-layout-demo-basic .ant-layout-content {
  min-height: 120px;
  color: #fff;
  line-height: 120px;
  background: rgba(16, 142, 233, 1);
}
[data-theme='dark'] #components-layout-demo-basic .ant-layout-content {
  background: #107bcb;
}
#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
  margin-top: 48px;
}
</style>
